<template>
  <div class="user-search-result-container">
    <!-- 顶部导航 -->
    <div class="search-header">
      <button class="back-btn" @click="goBack">
        <SvgIcon iconName="icon-zuojiantou" fontSize="65px" color="red"></SvgIcon>
      </button>
      <div class="search-info">
        <h2>用户搜索结果</h2>
        <p>关键词："{{ searchKeyword }}"</p>
      </div>
    </div>

    <!-- 搜索结果统计 -->
    <div class="result-stats">
      <span>找到 {{ searchResults.length }} 个相关用户</span>
    </div>

    <!-- 搜索结果列表 -->
    <div v-if="searchResults.length > 0" class="search-results">
      <div class="user-list">
        <div v-for="user in searchResults" :key="user.user_id" class="user-item" @click="goToUserDetail(user.user_id)">
          <img class="user-avatar" :src="user.avatar_url || defaultAvatar" />
          <div class="user-info">
            <div class="user-name">{{ user.nickname || '未设置名称' }}</div>
            <div class="user-status">
              <span v-if="isFollowing(user.user_id)" class="following-status">已关注</span>
              <span v-else class="follow-status">关注</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <div class="empty-icon">
        <SvgIcon iconName="icon-sousuo1" fontSize="120px" color="#ccc"></SvgIcon>
      </div>
      <h3>没有找到相关用户</h3>
      <p>试试其他关键词吧</p>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import SvgIcon from '@/components/svgIcon.vue';
import defaultAvatar from '@/assets/czq/pic.png';

export default {
  name: 'UserSearchResult',
  components: {
    SvgIcon
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const searchKeyword = ref('');
    const searchResults = ref([]);
    const myFollowingList = ref([]);

    // 返回上一页
    const goBack = () => {
      router.go(-1);
    };

    // 跳转到用户详情
    const goToUserDetail = (userId) => {
      router.push({
        path: '/usercont',
        query: { userId: userId }
      });
    };

    // 检查是否已关注
    const isFollowing = (userId) => {
      return myFollowingList.value.includes(userId);
    };

    // 获取当前用户的关注列表
    const getMyFollowingList = async () => {
      try {
        const userId = localStorage.getItem('user_id');
        if (!userId) {
          console.error('未找到用户ID');
          return;
        }
        const response = await axios.get(`http://1.14.98.17:8765/api/profile/${userId}/following`);
        if (response.data.success) {
          myFollowingList.value = response.data.data.following;
        }
      } catch (error) {
        console.error('获取关注列表失败:', error);
      }
    };

    // 搜索用户
    const searchUsers = async (keyword) => {
      try {
        // 获取所有用户
        const response = await axios.get('http://1.14.98.17:8765/api/users');
        if (!response.data.success) {
          console.error('获取用户列表失败');
          return;
        }

        // 过滤匹配的用户
        const matchedUsers = response.data.data.filter(user => 
          user.nickname && user.nickname.toLowerCase().includes(keyword.toLowerCase())
        );

        searchResults.value = matchedUsers;
        console.log('用户搜索结果:', searchResults.value);
      } catch (error) {
        console.error('搜索失败:', error);
      }
    };

    onMounted(async () => {
      const keyword = route.query.keyword;
      if (keyword) {
        searchKeyword.value = keyword;
        await getMyFollowingList();
        await searchUsers(keyword);
      }
    });

    return {
      searchKeyword,
      searchResults,
      defaultAvatar,
      goBack,
      goToUserDetail,
      isFollowing
    };
  }
};
</script>

<style scoped>
.user-search-result-container {
  width: 750px;
  margin: 0 auto;
  background-color: #fff;
  min-height: 100vh;
  padding-bottom: 40px;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-btn {
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 28px;
  transition: all 0.2s ease;
  border-radius: 50%;
  margin-right: 16px;
}

.back-btn:hover {
  background-color: #f5f5f5;
}

.search-info {
  flex: 1;
}

.search-info h2 {
  margin: 0 0 4px 0;
  font-size: 32px;
  color: #333;
  font-weight: 600;
}

.search-info p {
  margin: 0;
  font-size: 24px;
  color: #666;
}

.result-stats {
  padding: 16px 24px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
}

.result-stats span {
  font-size: 24px;
  color: #666;
}

.search-results {
  padding: 0 24px;
}

.user-list {
  width: 100%;
}

.user-item {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.user-item:hover {
  background-color: #f8f8f8;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 24px;
}

.user-name {
  font-size: 32px;
  color: #000;
  font-weight: 500;
}

.user-status {
  width: 130px;
  text-align: center;
}

.following-status {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border: 1px solid #ff2442;
  border-radius: 30px;
  color: #ff2442;
  font-size: 24px;
}

.follow-status {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border: 1px solid #ccc;
  border-radius: 30px;
  color: #666;
  font-size: 24px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 24px;
  text-align: center;
}

.empty-icon {
  margin-bottom: 24px;
}

.empty-state h3 {
  font-size: 32px;
  color: #333;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.empty-state p {
  font-size: 24px;
  color: #666;
  margin: 0;
}
</style> 